/*
 react、react-router、redux、react-redux、redux-thunk、redux-logger 示例
 */
import React from 'react'
import ReactDOM from "react-dom"
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import {applyMiddleware,createStore,compose} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import {createLogger} from 'redux-logger'

import Network from './components/Network'
import Panel from './components/Panel'
import Home from './components/Home'
import rootReducers from './reducers'
import styles from './index.css'

/***************   redux  *********************/

const logger = createLogger();
const enhancer = compose(applyMiddleware(thunk,logger))

let store = createStore(
    rootReducers,
    enhancer
)
/***************   end redux  *********************/

const About = ()=>(
    <div style={{flex:1}}><h2>About</h2></div>
)




const App = ()=>(
    <Provider store={store}>
    <Router>
        <div className="app">
            <Route exact path='/' component={Home}></Route>
            <Route path='/home' component={Home}></Route>
            <Route path='/about' component={About}></Route>
            <Route path='/network' component={Network}></Route>
            <Route path='/panel' component={Panel}></Route>
            <ul>
                <li><Link to='/home'>首页</Link></li>

                <li><Link to='/network'>上网设置</Link></li>
                <li><Link to='/about'>WIFI设置</Link></li>
                <li><Link to='/about'>高级设置</Link></li>
                <li><Link to='/about'>关于</Link></li>
            </ul>
        </div>
    </Router>
    </Provider>
)



ReactDOM.render(
    <App/>,
    document.getElementById('root')
);